import React from 'react'


//导入 列表组件需要的 样式表
//直接导入样式表，默认是在全局作用域生效的
//
import cssobj from '@/css/cmtList.scss'
console.log(cssobj)

//导入评论项 子组件
import CmtItem from '@/components/CmtItem2'


// import bootcss from 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/css/bootstrap.css'


export default class CmtList extends React.Component{
    constructor(){
        super()
        this.state = {
            CommentList:[ //评论列表数据
                {id:1,user:'张三',content:'哈哈 沙发'},
                {id:2,user:'李四',content:'国服第一，不服来战'},
                {id:3,user:'王五',content:'你真是个棒槌，带死你'},
                {id:4,user:'赵六',content:'楼下是个山炮，不嫌丢人吗？？？😆'},
            ]
        }
    }
    render(){
        return <div>
            {/* 写法一：后边样式会覆盖前边的样式 */}
            {/* <h1 className={cssobj.title} className="test">评论列表</h1>  */}
            
            {/* 写法二：字符串拼接 */}
            {/* <h1 className={cssobj.title + ' test'}>评论列表</h1> */}

            {/* 写法三：以数组的形式 */}
            <h1 className={[cssobj.title,'test'].join(' ')}>评论列表</h1>
            {/* <button className={[bootcss.btn,bootcss['btn-primary']].join(' ')}>按钮</button> */}
            <button className="btn btn-primary">按钮</button>
            <div className="panel panel-primary"></div>
            {this.state.CommentList.map(item => <CmtItem {...item} key={item.id}></CmtItem>)}
        </div>
    }
}